<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               >
       <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   size="small"
                   v-if="permission.work_todo_follow"
                   plain
                   class="none-border"
                   @click.stop="handleImage(scope.row,scope.index)">流程图
        </el-button>
        <el-button type="text"
                   size="small"
                   plain
                   class="none-border"
                   @click.stop="handleDeal(scope.row,scope.index)">处理
        </el-button>
      </template>
    </avue-crud>
    <el-dialog title="流程图"
               append-to-body
               :visible.sync="flowBox"
               :fullscreen="true">
      <iframe
        :src=flowUrl
        width="100%"
        height="700"
        title="流程图"
        frameBorder="no"
        border="0"
        marginWidth="0"
        marginHeight="0"
        scrolling="no"
        allowTransparency="yes">
      </iframe>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="flowBox = false">关 闭</el-button>
      </span>
    </el-dialog>
       <!-- 办理 -->
    <el-dialog title="办理详情"
               append-to-body
               :visible.sync="dealBox"
               width="80%" >
               <el-container>
                <el-main style="overflow: hidden;" >
                    <avue-form :option="option" :rules="rules" v-model="form"  @submit="handleSave" @cancel="handleCancel">
                    </avue-form>
                </el-main>
                <el-aside width="35%"  >
                  <el-card >
                    
                       <div class="calendar-info">
                        <el-card shadow="hover">
                            <div slot="header">
                              <span>流程信息</span>
                            </div>
                            <el-row type="flex" class="row-bg">
                              <el-timeline>
                               
                                <el-timeline-item :key="flow.id" :timestamp="flow.assigneeName" v-for="flow in flowList" placement="top">
                                  <el-card shadow="hover">
                                    <p>在 [{{flow.handlingTime}}] 开始处理 [{{flow.historyActivityName}}] 环节</p>
                                    <p v-if="flow.comment!==''">批复意见: [{{flow.comment}}]</p>
                                  </el-card>
                                </el-timeline-item>
                              </el-timeline>
                            </el-row>
                          </el-card>
                          <el-card shadow="hover">
                            <div slot="header">
                              <span>流程跟踪</span>
                            </div>

                            <el-row type="flex" class="row-bg" v-if="src!=''">
                              <img :src="src" alt="design" width="100%">
                            </el-row>
                            <div slot="header" v-if="src==''">
                              <br/>
                              自办矛盾，无流程图
                            </div>
                          </el-card>
                       </div>
                    </el-card>
                </el-aside>
                 
                </el-container>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, getDetail,dealSave,disputeFlowList} from "@/api/xapply/incidentReporting/myCommissionIncident";
  import {mapGetters} from "vuex";
  import {validatenull} from "@/util/validate";
  import {getNextTaskCondition} from "@/api/work/process";
  import {getTurnDeptList} from "@/api/system/dept";

  export default {
    data() {
      return {
        form: {},
         viewForm:{

        },
        query: {},
        flowBox: false,
        dealBox: false,
        flowUrl: '',
        src: '',
        flowList: [],
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          indexLabel:'序号',
          height: 'auto',
          calcHeight: 30,
          dialogWidth: 1150,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          selection: false,
          excelBtn: false,
          editBtn:false,
          submitBtn: true,
          emptyBtn: false,
          addBtn: false,
          delBtn: false,
          dialogClickModal: false,
          column: [
            {
              label: "主键",
              prop: "id",
              type: "input",
              display: false,
              disabled: true,
              hide: true,
            },
             {
              label: "所属网格",
              prop: "gridId",
              type: "tree",
              disabled: true,
              span: 24,
              parent: false,
              display: true,
              dicMethod: "get",
              dicUrl: "/api/smart-system/dept/treeByPid",
              props: {
                label: "title"
              
              },
              checkStrictly: true,
              search: true,
              rules: [{
                required: true,
                message: "请输入所属网格",
                trigger: "click"
              }],
            },
            {
              label: "标题",
              prop: "title",
              type: "input",
              disabled: true,
              span: 24,
              search: true,
              overHidden: true,
              rules: [{
                required: true,
                message: "请输入标题",
                trigger: "blur"
              }],
            },
            {
              label: "事件描述",
              prop: "content",
              type: "textarea",
              disabled: true,
              span: 24,
              hide: true,
              rules: [{
                required: true,
                message: "请输入事件描述",
                trigger: "blur"
              }],
            },
            {
              label: "事件分类",
              prop: "eventClassification",
              type: "select",
              disabled: true,
              dicUrl: "/api/smart-xapply/phoneapply/eventClass/selectList",
              props: {
                label: "title",
                value: "key"
              },
              rules: [{
                required: true,
                message: "请输入事件分类",
                trigger: "blur"
              }],
            },
              {
              label: "是否重大事件",
              prop: "isImportant",
              type: "radio",
              disabled: true,
              search: true,
              dicData: [
                {
                  label: "重大",
                  value: "0"
                },
                {
                  label: "普通",
                  value: "1"
                },
              ],
              rules: [{
                required: true,
                message: "请输入是否重大事件",
                trigger: "blur"
              }],
            },
            {
              label: "上报地点",
              prop: "eventLocation",
              type: "input",
              disabled: true,
              span: 24,
              overHidden: true,
            },
            {
              label: "经度",
              prop: "lng",
              type: "input",
              disabled: true,
              hide: true,
            },
            {
              label: "维度",
              prop: "lat",
              type: "input",
              disabled: true,
              hide: true,
            },
           
            {
              label: "类型",
              prop: "isOneself",
              type: "select",
              disabled: true,
               dicData: [
                {
                  label: "自办",
                  value: "0"
                },
                {
                  label: "上报",
                  value: "1"
                },
                 {
                  label: "转派",
                  value: "2"
                },
                 {
                  label: "反馈",
                  value: "3"
                },
                ],
             display: false,
            },
          
            {
              label: "状态",
              prop: "state",
              type: "select",
              disabled: true,
              dicData: [
                {
                  label:"待处理",
                  value: "0"
                },
                {
                  label:"已办结",
                  value: "1"
                }
              ],
              display: false,
            },
            
             {
              label: "信息来源",
              prop: "source",
              type: "select",
              disabled: true,
              dicData: [
                {
                  label:"电脑上报",
                  value: "pc"
                },
                {
                  label:"APP上报",
                  value: "app"
                }
              ],
              display: false,
            },
            {
              label: "创建时间",
              prop: "createTime",
              type: "input",
              disabled: true,
              display: false,
            },
             {
              label: "办理方式",
              prop: "handleType",
              type: "select",
              dicData:[],
               props: {
                label: "title",
                value: "key"
              },
              rules: [{
                  required: true,
                  message: "请选择办理方式",
                  trigger: "blur"
                }],
              hide: true,
              change: ({value}) => {
                this.handlerChangeType(value);
              },
            },
            {
              label: "转派部门",
              prop: "turnDept",
              type: "tree",
              span: 12,
              parent: false,
              display: false,
              dicMethod: "get",
              hide: true,
              dicData: [],
              props: {
                label: "title",
                value: "key"
              },
              checkStrictly: true,
              rules: [{
                required: true,
                message: "请输入转派部门",
                trigger: "click"
              }],
            },
             {
              label: "处理意见",
              prop: "handlingSuggestion",
              type: "textarea",
              minRows:4,
              maxlength: 4000,
              showWordLimit: true,
              hide: true,
              span: 24,
            },
          ]
        },
        data: [],
       
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
         
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      //办理类型切换
   handlerChangeType(value){
           
            var turnDept = this.findObject(this.option.column,"turnDept");//转派部门
            if(value == 'end') {
                turnDept.display = false;
            }else if(value == 'streetBu'||value == 'countyBu'||value == 'cityBu'){
                turnDept.display = true;
                getTurnDeptList().then(res=>{
                  turnDept.dicData = res.data.data;
                })
            }else{
                turnDept.display = false;
            }
      },
      //查看流程图
      handleImage(row) {
        if(!validatenull(row.flowId)){
          this.flowUrl = `/api/smart-flow/process/diagram-view?processInstanceId=${row.flowId}`;
          this.flowBox = true;
        }else{
           this.$message.error("自办矛盾，无流程图");
        }
      },
       //办理
      handleDeal(row){
            //流程图
             if(!validatenull(row.flowId)){
              this.src = `/api/smart-flow/process/diagram-view?processInstanceId=${row.flowId}`;
             }
            //流程信息--这是用的自己的流程
            disputeFlowList(row.id).then(res=>{
            const data = res.data;
              if (data.success) {
                this.flowList = data.data;
              }
            })
            getDetail(row.id).then(res => {
              this.form = res.data.data;
              this.dealBox = true;
              });
            getNextTaskCondition(row.taskId).then(res=>{
            //处理字段
            const handleType = this.findObject(this.option.column ,"handleType");
            handleType.dicData =res.data.data;
          })
      },
      //处理保存
      handleSave(row,loading){
        loading();
          dealSave(row).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "保存成功!"
            });
            //done();
            this.dealBox = false;
            this.onLoad(this.page);
          }, error => {
            loading();
            window.console.log(error);
          });
      },
      beforeOpen(done) {
       
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
.el-form-item__content{
   margin-left: 130px ! important;
}
.el-form-item__label {
  width: 130px ! important;
}
.cell-blue{
      color: blue!important;
      cursor: pointer;
  }
</style>
